/* eslint-disable prettier/prettier */
import React, { useEffect, useState, useRef } from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import Video from 'react-native-video';

const { width, height } = Dimensions.get('window');

const SoundPlay = ({ text, isPlaying }) => {
  const [videoPath, setVideoPath] = useState('');
  const videoRef = useRef(null); // Use ref to access video player

  useEffect(() => {
    setVideoPath( text);
      // 清理函数
      return () => {
        null;
      };
    }, [text],[isPlaying]);

  useEffect(() => {
    // 在 videoPath 更新后重置视频播放
    if (videoRef.current) {
      videoRef.current.seek(0); // 重置到视频开头
    }
  }, [isPlaying]); // 依赖 videoPath

  return (
    <View style={styles.container}>
      {videoPath ? (
        <Video
          ref={videoRef} // 通过 ref 访问视频实例
          source={{ uri: videoPath }} // 本地视频文件的 URI
          style={styles.hiddenVideo}
          controls={isPlaying} // 根据 isPlaying 显示或隐藏控制器
          paused={!isPlaying} // 根据 isPlaying 控制是否播放
          resizeMode="cover" // 视频显示模式
        />
      ) : null}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  backgroundVideo: {
    width,
    height,
  },
});

export default SoundPlay;